---
import { Image } from 'astro:assets'
import LogoOnly from '$assets/logo/threlte-logo-only.png'

interface Props {
  class?: string
}
---

<footer class:list={['grid grid-cols-1 gap-6 text-sm md:grid-cols-3', Astro.props.class ?? '']}>
  <div class="flex flex-col gap-6">
    <Image
      src={LogoOnly}
      alt="threlte logo"
      width={37}
      height={35}
      class="w-[37px]"
    />
    <p class="text-faded">
      Threlte is a 3D framework for Svelte.<br />
      &copy; 2025
    </p>
  </div>

  <div class="grid grid-cols-2">
    <ul>
      <li class="mb-4 font-bold uppercase">Get Started</li>
      <li>
        <a
          class="text-faded block py-2 hover:text-white"
          href="/docs/learn/getting-started/installation"
          >Install</a
        >
      </li>
      <li>
        <a
          class="text-faded block py-2 hover:text-white"
          href="/docs/learn/getting-started/your-first-scene"
          >Concepts</a
        >
      </li>
      <li>
        <a
          class="text-faded block py-2 hover:text-white"
          href="/docs/reference/core/getting-started"
          >Reference</a
        >
      </li>
    </ul>
    <ul>
      <li class="mb-4 font-bold uppercase">Community</li>
      <li>
        <a
          href="https://twitter.com/threlte"
          target="_blank"
          rel="noopener noreferrer"
          class="text-faded block py-2 hover:text-white"
        >
          Twitter
        </a>
      </li>
      <li>
        <a
          href="http://chat.threlte.xyz"
          target="_blank"
          rel="noopener noreferrer"
          class="text-faded block py-2 hover:text-white"
        >
          Discord
        </a>
      </li>
      <li>
        <a
          href="https://github.com/threlte/threlte"
          target="_blank"
          rel="noopener noreferrer"
          class="text-faded block py-2 hover:text-white"
        >
          GitHub
        </a>
      </li>
    </ul>
  </div>
</footer>
